<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link type="text/css" href="css/default.css?123" rel="stylesheet" />
    <link type="text/css" href="css/smoothness/jquery-ui-1.8.22.custom.css" rel="stylesheet" />
    <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8.22.custom.min.js"></script>
    <script type="text/javascript" src="js/wsclient.js?2032"></script>
    <title>Chat Websockets</title>
    <script type="text/javascript">
        $(function(){
            $('#conversations').tabs();
        });
    </script>
</head>
<body>
<h1>Chat WebSocket</h1>
<div id="container">
    <div class="leftPanel">
        <div class="userInfo">
            <span class="disconnected" id="status">Desconectado</span>
            Nombre: <input type="text" id="userName"/><span class="onLineUserName"></span>
        </div>
        <div>
            <button id="connect" onclick="wsclient.connect(document.getElementById('userName').value);">Conectar</button>
            <button id="disconnect" disabled="disabled" onclick="wsclient.disconnect();">Desconexión</button>
        </div>
        <div id="onLineUsersPanel">
            <h3>Usuarios conectados:</h3>
            <ul id="onlineUsers">

            </ul>
        </div>
    </div>

    <div id="conversations">
        <ul>
        </ul>
    </div>
</div>
</body>
</html>